import { ChartData } from '@/types/chat';
import { Card, CardContent, Typography } from '@mui/joy';
import { Chart } from '@berryv/g2-react';
import { useRef } from 'react';
import { theme } from './theme.js';

export default function LineChart({ chart }: { chart: ChartData }) {
  const chartRef = useRef();
  function onInit() {
    const chart = chartRef.current;
    chart.theme({ ...theme });
    
    chart.scale('category', {
      label: {
        custom(cfg, group) {
          const { x, y, content } = cfg;
          // 创建一个text元素，并设置其属性以实现换行
          const text = group.addShape({
            type: 'text',
            attrs: {
              x,
              y,
              text: content,
              textAlign: 'center', // 对齐方式
              textBaseline: 'middle',
              fill: '#666', // 字体颜色
              lineWidth: 1, // 可选，线条宽度（用于模拟多行效果）
              stroke: '#fff', // 可选，线条颜色（用于模拟多行效果）
              lineHeight: 16, // 行间距
              overflow: 'break-all', // 这个属性G2中可能不支持，但这里表达希望达到的效果，实际可能需要在content上手动插入'\n'来换行
              width: 100, // 可设定最大宽度，配合word-break或word-wrap属性实现换行
            },
            className: 'custom-label', // 添加类名以便后续CSS选择器使用
          });
          // 在这里可以添加额外的CSS样式，例如设置max-width和word-break
          text.attr('style', 'max-width: 100px; word-break: break-all;');
        }
      }
    });
    /* chart.axis('xField', {
      label: {
        autoRotate: false, // 关闭自动旋转，以便于控制换行
        formatter: (text:any, item) => {
          // 使用\n进行手动换行，或者使用一些自动换行的逻辑
          const maxLength = 4; // 假设每行最多10个字符
          if (text.length > maxLength) {
            let rows = Math.ceil(text.length / maxLength);
            let result = [];
            for (let i = 0; i < rows; i++) {
              result.push(text.slice(i * maxLength, (i + 1) * maxLength));
            }
            return result.join('\n');
          }
          return text;
        },
        offset: 10, // 可能需要调整偏移量以适应多行文本
        style: {
          textAlign: 'center', // 文本对齐方式
          textBaseline: 'middle', // 基线对齐方式
        },
      },
    }); */
    chart.render();
  }

  return (
    <div className="flex-1 min-w-0">
      <Card className="h-full" sx={{ background: 'transparent' }}>
        <CardContent className="h-full">
          <Typography gutterBottom component="div">
            {chart.chart_name}
          </Typography>
          <Typography gutterBottom level="body3">
            {chart.chart_desc}
          </Typography>
          <div className="h-[300px]">
            <Chart
              style={{ height: '100%' ,display:'inline-block',wordBreak:'break-all'}}
              options={{
                autoFit: true,
                type: 'view',
                data: chart.values,
                children: [
                  {
                    type: 'line',
                    encode: {
                      x: 'name',
                      y: 'value',
                      color: 'type',
                      shape: 'smooth',
                    },
                  },
                  {
                    type: 'area',
                    encode: {
                      x: 'name',
                      y: 'value',
                      color: 'type',
                      shape: 'smooth',
                    },
                    legend: false,
                    style: {
                      fillOpacity: 0.15,
                      color: '#fff',
                    },
                  },
                ],
                axis: {
                  x: {
                    labelAutoRotate: false,
                  },
                },
              }}
              ref={chartRef}
              onInit={onInit}
            />
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
